<%--
  Created by IntelliJ IDEA.
  User: wang
  Date: 2022/11/26
  Time: 12:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>管理员商品列表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
    <script src="js/jquery-3.6.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
<%--    以下是对搜索框的样式设计--%>
    <style>
        #myInput {
            background-image: url('https://static.runoob.com/images/mix/searchicon.png'); /* 搜索按钮 */
            background-position: 10px 12px; /* 定位搜索按钮 */
            background-repeat: no-repeat; /* 不重复图片 */
            width: 100%;
            font-size: 16px;
            padding: 12px 20px 12px 40px;
            border: 1px solid #ddd;
            margin-bottom: 12px;
        }

        #myTable {
            border-collapse: collapse;
            width: 100%;
            border: 1px solid #ddd;
            font-size: 18px;
        }

        #myTable th, #myTable td {
            text-align: left;
            padding: 12px;
        }

        #myTable tr {
            /* 表格添加边框 */
            border-bottom: 1px solid #ddd;
        }

        #myTable tr.header, #myTable tr:hover {
            /* 表头及鼠标移动过 tr 时添加背景 */
            background-color: #f1f1f1;
        }
    </style>


</head>
<body>
<nav class="navbar navbar-default navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <button
                    type="button"
                    class="navbar-toggle collapsed"
                    data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1"
                    aria-expanded="false"
            >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">校园易物平台系统</a>
            <a class="navbar-brand text-right">欢迎登陆${admin.name}
            </a>

        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">

    <li><a href="${pageContext.request.contextPath}/index.jsp">退出</a></li>

    <li class="active"><a href="${pageContext.request.contextPath}/ShowAllGoodsController">交易广场</a></li>
                <li><a href="${pageContext.request.contextPath}/ShowAllBadGoodsServlet">举报信箱</a></li>
                <li><a href="${pageContext.request.contextPath}/adminreport.jsp">发布公告</a></li>

    <li class="dropdown">
                    <a
                            href="#"
                            class="dropdown-toggle"
                            data-toggle="dropdown"
                            role="button"
                            aria-haspopup="true"
                            aria-expanded="false"
                    >Dropdown <span class="caret"></span
                    ></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search" />
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="${pageContext.request.contextPath}/index.jsp">退出</a></li>
                <li class="dropdown">
                    <a
                            href="#"
                            class="dropdown-toggle"
                            data-toggle="dropdown"
                            role="button"
                            aria-haspopup="true"
                            aria-expanded="false"
                    >Dropdown <span class="caret"></span
                    ></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>

            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <table class="table table-striped">
        <caption>交易广场————所有商品</caption>
        <thead>
        <tr>
            <th>商品序号</th>
            <th>商品名称</th>
            <th>商品类型</th>
            <th>交易媒介</th>
            <th>交易方式</th>
        </tr>
        </thead>
        <tbody>
<%--        这里的搜索功能则是使用JS来实现的--%>
        <input type="text" id="myInput" onkeyup="myFunction()" placeholder="搜索...">

        <table id="myTable">

<%--            JSTL标准标签库进行循环遍历--%>
            <c:forEach items="${goods}" var="good">
<%--            使用列表展示商品信息，便于后面的商品搜索--%>
                <tr id="myTR">
                    <td>${good.id}</td>
                    <td>${good.goodname}</td>
                    <td>${good.goodtype}</td>
                    <td>${good.changemedium}</td>
                    <td>${good.changeway}</td>
                    <td>
                        <a href="<c:url context="${pageContext.request.contextPath}" value="/DeleteGoodsController?goodname=${good.goodname}"/>" >封禁商品</a>&nbsp;
                    </td>
                </tr>

            </c:forEach>
        </table>

<%--        商品搜索使用JS实现，简化了代码，开始也考虑使用后端servlet进行搜索操作，但限于技术问题还是选择了JS--%>
        <script>
            function myFunction() {
                // 声明变量
                var input, filter, table, tr, td, i,j;
                input = document.getElementById("myInput");
                filter = input.value.toUpperCase();
                table = document.getElementById("myTable");
                tr = table.getElementsByTagName("tr");

                // 循环表格每一行，查找匹配项
                for (i = 0; i < tr.length; i++) {
                    // 查找每一列数据，实现多种字段查找
                    td = tr[i].getElementsByTagName("td")[0];
                    if (td) {
                        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                            tr[i].style.display = "";
                        } else {
                            td = tr[i].getElementsByTagName("td")[1];
                            if (td) {
                                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                                    tr[i].style.display = "";
                                } else {
                                    td = tr[i].getElementsByTagName("td")[2];
                                    if (td) {
                                        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                                            tr[i].style.display = "";
                                        } else {
                                            td = tr[i].getElementsByTagName("td")[3];
                                            if (td) {
                                                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                                                    tr[i].style.display = "";
                                                } else {
                                                    td = tr[i].getElementsByTagName("td")[4];
                                                    if (td) {
                                                        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                                                            tr[i].style.display = "";
                                                        } else {
                                                            tr[i].style.display = "none";
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        </script>



        </tbody>
    </table>

<%--    分页的样式--%>
    <nav aria-label="Page navigation">
        <ul class="pagination">

            <li>
<%--            JSTL条件判断，如果当前页码大于1，则将pageindex-1--%>
                <c:if test="${page.pageIndex > 1}">
                    <a href="<c:url context='${pageContext.request.contextPath}' value='/ShowAllGoodsController?pageIndex=${page.pageIndex -1}'/>" aria-label="Previous" >
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </c:if>
<%--            如果当前页码已经为一，则即使点击上一页的图标也不会变化--%>
                <c:if test="${page.pageIndex == 1}">
                    <a aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </c:if>
            </li>
<%--            如果点击首页则将pageindex设置为1--%>
            <li><a href="<c:url context='${pageContext.request.contextPath}' value='/ShowAllGoodsController?pageIndex=1'/>">首页</a></li>
<%--            如果点击尾页则将pageindex设置为总页数--%>
            <li><a href="<c:url context='${pageContext.request.contextPath}' value='/ShowAllGoodsController?pageIndex=${page.totalPages}'/>">尾页</a></li>
            <li>

                <c:if test="${page.pageIndex < page.totalPages}">
                    <a href="<c:url context='${pageContext.request.contextPath}' value='/ShowAllGoodsController?pageIndex=${page.pageIndex +1}'/>" aria-label="Previous">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </c:if>
                <c:if test="${page.pageIndex == page.totalPages}">
                    <a  aria-label="Previous">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </c:if>
            </li>
        </ul>
    </nav>

</div>
</body>
</html>
